<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-field
        readonly
        clickable
        name="picker"
        :value="valueDepartment"
        label="部门"
        placeholder="点击选择城市"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        v-model="quesTitle"
        name="用户名"
        label="标题"
        placeholder="请填写标题"
        :rules="[{ required: true, message: '请填写标题' }]"
      />

      <van-field
        v-model="question"
        rows="3"
        autosize
        label=""
        type="textarea"
        placeholder="请输入内容"
      />

      <div class="btn-wrapper">
        <button class="exam-btn" native-type="submit">提交</button>
      </div>

    </van-form>
  </div>
</template>

<script>
  export default {
    name: "send-quesition",
    data() {
      return {
        valueDepartment: '',
        columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
        showPicker: false,
        quesTitle: '',
        question: ''
      };
    },

    methods: {
      onConfirm(value) {
        this.valueDepartment = value;
        this.showPicker = false;
      },

      onSubmit(values) {
        console.log('submit', values);
      },
    },
  }
</script>

<style scoped>

</style>
